<script lang="ts" setup>
import type { TechniciansApi } from '#/api/spa/technicians';
import type { Rule } from 'ant-design-vue/es/form';

import { useVbenModal } from '@vben/common-ui';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from '#/components/upload';
import {
  message,
  Tabs,
  Form,
  Input,
  Textarea,
  Select,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  DatePicker,
  TreeSelect,
} from 'ant-design-vue';

import { computed, ref } from 'vue';
import { $t } from '#/locales';
import {
  getTechnicians,
  createTechnicians,
  updateTechnicians,
} from '#/api/spa/technicians';

const emit = defineEmits(['success']);

const formRef = ref();
const formData = ref<Partial<TechniciansApi.Technicians>>({
  id: undefined,
  technicianCode: undefined,
  name: undefined,
  gender: undefined,
  department: undefined,
  employeeCard: undefined,
  productType: undefined,
  status: undefined,
  currentServiceTime: undefined,
  currentServiceName: undefined,
  currentRoomNumber: undefined,
  currentCount: undefined,
  totalCount: undefined,
});
const rules: Record<string, Rule[]> = {
  technicianCode: [
    { required: true, message: '技师编号不能为空', trigger: 'blur' },
  ],
  name: [{ required: true, message: '技师姓名不能为空', trigger: 'blur' }],
  gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
  department: [
    { required: true, message: '所属部门不能为空', trigger: 'blur' },
  ],
  employeeCard: [
    { required: true, message: '员工卡号不能为空', trigger: 'blur' },
  ],
  productType: [
    { required: true, message: '产品类型不能为空', trigger: 'change' },
  ],
  status: [{ required: true, message: '技师状态不能为空', trigger: 'blur' }],
};
const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['技师管理'])
    : $t('ui.actionTitle.create', ['技师管理']);
});

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    technicianCode: undefined,
    name: undefined,
    gender: undefined,
    department: undefined,
    employeeCard: undefined,
    productType: undefined,
    status: undefined,
    currentServiceTime: undefined,
    currentServiceName: undefined,
    currentRoomNumber: undefined,
    currentCount: undefined,
    totalCount: undefined,
  };
  formRef.value?.resetFields();
};

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    await formRef.value?.validate();
    modalApi.lock();
    // 提交表单
    const data = formData.value as TechniciansApi.Technicians;
    try {
      await (formData.value?.id
        ? updateTechnicians(data)
        : createTechnicians(data));
      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success({
        content: $t('ui.actionMessage.operationSuccess'),
        key: 'action_process_msg',
      });
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      resetForm();
      return;
    }
    // 加载数据
    let data = modalApi.getData<TechniciansApi.Technicians>();
    if (!data) {
      return;
    }
    if (data.id) {
      modalApi.lock();
      try {
        data = await getTechnicians(data.id);
      } finally {
        modalApi.unlock();
      }
    }
    formData.value = data;
  },
});
</script>

<template>
  <Modal :title="getTitle">
    <Form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
    >
      <Form.Item label="技师编号" name="technicianCode">
        <Input
          v-model:value="formData.technicianCode"
          placeholder="请输入技师编号"
        />
      </Form.Item>
      <Form.Item label="技师姓名" name="name">
        <Input v-model:value="formData.name" placeholder="请输入技师姓名" />
      </Form.Item>
      <Form.Item label="性别" name="gender">
        <Input v-model:value="formData.gender" placeholder="请输入性别" />
      </Form.Item>
      <Form.Item label="所属部门" name="department">
        <Input
          v-model:value="formData.department"
          placeholder="请输入所属部门"
        />
      </Form.Item>
      <Form.Item label="员工卡号" name="employeeCard">
        <Input
          v-model:value="formData.employeeCard"
          placeholder="请输入员工卡号"
        />
      </Form.Item>
      <Form.Item label="产品类型" name="productType">
        <Select
          v-model:value="formData.productType"
          placeholder="请选择产品类型"
        >
          <Select.Option label="请选择字典生成" value="" />
        </Select>
      </Form.Item>
      <Form.Item label="技师状态" name="status">
        <RadioGroup v-model:value="formData.status">
          <Radio value="1">请选择字典生成</Radio>
        </RadioGroup>
      </Form.Item>
      <Form.Item label="当前服务时长" name="currentServiceTime">
        <DatePicker
          v-model:value="formData.currentServiceTime"
          valueFormat="x"
          placeholder="选择当前服务时长"
        />
      </Form.Item>
      <Form.Item label="当前服务项目" name="currentServiceName">
        <Input
          v-model:value="formData.currentServiceName"
          placeholder="请输入当前服务项目"
        />
      </Form.Item>
      <Form.Item label="当前房间号" name="currentRoomNumber">
        <Input
          v-model:value="formData.currentRoomNumber"
          placeholder="请输入当前房间号"
        />
      </Form.Item>
      <Form.Item label="当前服务次数" name="currentCount">
        <Input
          v-model:value="formData.currentCount"
          placeholder="请输入当前服务次数"
        />
      </Form.Item>
      <Form.Item label="总服务次数" name="totalCount">
        <Input
          v-model:value="formData.totalCount"
          placeholder="请输入总服务次数"
        />
      </Form.Item>
    </Form>
  </Modal>
</template>
